import { ref } from "vue";
export const formConfig = ref([
    {
        formType: "select",
        formName: "location",
        labelName: "区域位置",
        placeholder: "请选择区域位置",
        style: {
            width: "194px"
        },
        options: []
    },
    {
        formType: "select",
        formName: "equipmentCode",
        labelName: "设备编号",
        placeholder: "请选择设备编号",
        style: {
            width: "194px"
        },
        options: []
    },
    {
        formType: "select",
        formName: "equipmentCode",
        labelName: "设备名称",
        placeholder: "请选择设备名称",
        style: {
            width: "194px"
        },
        options: []
    }
]);

export function getNowDataOption(options) {
    let lineStyle = {};
    let series = [];
    let legendData = [];
    if (options.seriesData.length !== 1) {
        lineStyle = [
            {
                offset: 0,
                color: "#1568C9"
            },
            {
                offset: 1,
                color: "#0D2D42"
            }
        ];
        legendData = options.seriesData.filter((item) => item.location).map((item) => item.location);
        series = options.seriesData.map((item) => ({
            name: item.location,
            data: item.speed,
            type: "line",
            symbol: "none",
            smooth: true,
            lineStyle
        }));
    } else {
        lineStyle = {
            color: "#1568C9"
        };
        series = [{ data: options.seriesData[0], type: "line", symbol: "none", smooth: true, lineStyle }];
    }
    return {
        title: {
            text: options.titleName,
            textStyle: {
                color: "#C5D8FF",
                fontSize: 14,
                fontWeight: "normal"
            }
        },
        grid: {
            right: 80,
            top: 50,
            left: 50,
            bottom: 60
        },
        legend: {
            data: legendData,
            icon: "circle",
            bottom: 0,
            itemWidth: 8,
            itemHeight: 8,
            itemGap: 30,
            textStyle: {
                color: "#C5D8FF "
            }
        },
        xAxis: {
            type: "category",
            data: options.xAxisData,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            name: options.xAxisName,
            nameTextStyle: {
                color: "#BFBFBF"
            },
            axisLabel: {
                fontSize: 10,
                textStyle: {
                    color: "#BFBFBF"
                }
            }
        },
        yAxis: {
            type: "value",
            splitNumber: "4",
            splitLine: {
                lineStyle: {
                    type: "dashed",
                    color: "#20506A"
                }
            },
            axisLabel: {
                fontSize: 10,
                textStyle: {
                    color: "#BFBFBF"
                }
            },
            name: options.yAxisName,
            nameTextStyle: {
                color: "#BFBFBF"
            }
        },
        series
    };
}

export function getTrendOptions(options) {
    const series = options.seriesData.map((item) => ({
        name: "",
        data: item,
        type: "line",
        symbol: "none",
        smooth: true,
        lineStyle: {
            color: "#4BA6DD"
        }
    }));
    return {
        title: {
            text: options.titleName,
            textStyle: {
                color: "#C5D8FF",
                fontSize: 14,
                fontWeight: "normal"
            }
        },
        grid: {
            right: 20,
            top: 50,
            left: 50,
            bottom: 30
        },
        xAxis: {
            type: "category",
            data: options.xAxisData,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                fontSize: 10,
                textStyle: {
                    color: "#BFBFBF"
                }
            },
            boundaryGap: ["10%"]
        },
        yAxis: {
            type: "value",
            splitNumber: "4",
            splitLine: {
                lineStyle: {
                    type: "dashed",
                    color: "#20506A"
                }
            },
            axisLabel: {
                fontSize: 10,
                textStyle: {
                    color: "#BFBFBF"
                }
            },
            name: options.yAxisName,
            nameTextStyle: {
                color: "#BFBFBF"
            }
        },
        series: series
    };
}
